<template>
  <div>
    <div class="flex_y_center" style="margin-bottom: 20px">
      <div style="width: 30%; text-align: right">商品类型：</div>
      <div>{{ goodsTypeName }}</div>
    </div>
    <div class="flex_y_center" style="margin-bottom: 20px">
      <div style="width: 30%; text-align: right">
        <span>*</span>
        商品分组名称：
      </div>
      <el-input
        v-model="goodsTypeForm.method_name"
        placeholder="请输入商品分组名称"
        style="width: 40%"
      />
    </div>
    <div class="flex_y_center" style="margin-bottom: 20px">
      <div style="width: 30%; text-align: right">
        <span>*</span>
        商品分组描述：
      </div>
      <el-input
        v-model="goodsTypeForm.method_desc"
        placeholder="请输入商品分组描述"
        style="width: 40%"
      />
    </div>
    <div class="flex_between">
      <div></div>
      <el-button type="primary" @click="addGoodsType">保存</el-button>
    </div>
  </div>
</template>

<script>
  import { addCommodityType } from '@/api/commodityType'
  import { mapState } from 'vuex'

  export default {
    data() {
      return {
        // 商品类型提交数据
        goodsTypeForm: {
          type_id: '',
          method_name: '',
          method_desc: '',
        },
        hint: {
          method_name: '商品类型名称',
          method_desc: '商品类型描述',
        },
      }
    },
    computed: {
      ...mapState({
        goodsTypeId: (state) => state.goods.goodsTypeId,
        goodsTypeName: (state) => state.goods.goodsTypeName,
      }),
    },
    created() {
      console.log(this.goodsTypeId)
    },
    methods: {
      // 新增商品类型
      addGoodsType() {
        for (let item in this.hint) {
          if (this.goodsTypeForm[item] == '') {
            this.$message.error(this.hint[item] + '未填写')
            return
          }
        }
        this.goodsTypeForm.type_id = this.goodsTypeId
        addCommodityType(this.goodsTypeForm).then(() => {
          this.$emit('send')
        })
      },
    },
  }
</script>

<style scoped>
  span {
    color: red;
  }
  .flex_between {
    display: flex;
    justify-content: space-between;
  }
</style>
